<template>
	<el-breadcrumb separator="/">
		<transition-group name="breadcrumb">
			<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
				<span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1">{{item.meta.title}}</span>
				<a v-else>{{item.meta.title}}</a>
			</el-breadcrumb-item>
		</transition-group>
	</el-breadcrumb>
</template>

<script>
	export default {
		data() {
			return {
				levelList: [],
			}
		},
		watch: {
			$route(route) {
				this.getBreadcrumb();
			}
		},
		created() {
			this.getBreadcrumb();
		},
		methods: {
			getBreadcrumb() {
				let matched = this.$route.matched.filter(item => item.meta && item.meta.title);
				this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
			},
			handleLink(item) {
				const {
					redirect,
					path
				} = item;
				console.log('path',path)
				this.$router.push(path);
			},
		}
	}
</script>

















<!-- <template>
	<el-breadcrumb class="app-breadcrumb" separator="/">
		<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index">
			{{item}}
		</el-breadcrumb-item>
	</el-breadcrumb>
</template>

<script>
	export default {
		name: 'Breadcrumb',
		data() {
			return {
				breadcrumb:[],
				asideBarList:[],
				levelList:[],
			}
		},
		watch:{
			$route(to,from) {
				this.generateBreadcrumb(to,from)
			}
		},
		created() {
			this.asideBarList = JSON.parse(localStorage.getItem('allmenu'));
			console.log('this.asideBarList',this.asideBarList)
		},
		methods: {
			generateBreadcrumb(toRoute,fromRoute) {
				var routeCurrentParentName = '',
					breadcrumb = [];
				this.asideBarList.forEach((v,i)=>{
					if(v.children){
						v.children.forEach((item,j)=>{
							if(toRoute.name == item.name){
								routeCurrentParentName = v.name;
							}
						})
					}
				})
				if(!routeCurrentParentName) routeCurrentParentName = fromRoute.name;
				breadcrumb[0] = routeCurrentParentName;
				breadcrumb[1] = toRoute.name;
				this.breadcrumb = breadcrumb;
			},
		},
	}
</script>

<style>
	.breadcrumb-con {
		height: 50px;
	}

	.app-breadcrumb.el-breadcrumb {
		display: inline-block;
		font-size: 14px;
		line-height: 50px;
		margin-left: 8px;
	}

	.no-redirect {
		color: #97a8be;
		cursor: text;
	}
</style> -->